<template>
  <view class="quality-assurance-detail flexc">
    <view class="flex1 over mb70">
      <view class="header-box mb16">
        <view class="header-box-t">
          {{ mainData.detail.user_name || "" }}
        </view>
        <view class="flex-between">
          <view class="">
            <view class="">
              提交时间：{{ mainData.detail.created_at || "" }}
            </view>
            <view class="header-box-des">
              {{ mainData.detail.status_name || "" }}
            </view>
          </view>
          <!-- 	<image
						class="s-icon"
						src="/static/order/s-icon.png"
						mode="aspectFit"></image> -->
        </view>
      </view>
      <view class="wrap mb16">
        <view class="box2">
          <view class="">部门</view>
          <view class="">{{ action[type] }}</view>
        </view>
      </view>
      <view class="wrap mb16">
        <view v-if="!isEdit" class="box2">
          <view class="mb28 c16">检验人</view>
          <view class="c16">
            {{ topObj.inspector_user_name || "" }}
          </view>
        </view>
        <view v-else class="box">
          <view class="">检验人</view>
          <view @click="showCheckUser = true" class="box-b flex">
            <input
              class="flex1"
              type="text"
              disabled
              v-model="topObj.inspector_user_name"
              placeholder="默认检验人" />
            <image src="/static/login/pop-arrow.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      <view class="wrap mb16">
        <view v-if="!isEdit" class="box">
          <view class="">检验日期</view>
          <view class="color-black">{{ topObj.test_time }}</view>
        </view>
        <view v-else @click="showCheckDateFn" class="box">
          <view class="">检验日期</view>
          <view class="box-b flex">
            <input
              class="flex1"
              type="text"
              v-model="topObj.test_time"
              disabled
              placeholder="请选择" />
            <image src="/static/login/pop-arrow.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      <view class="wrap mb16">
        <view class="" v-for="(item, index) in formData" :key="index">
          <view :class="['box1', 'flex-between', !isEdit ? 'box-pd' : '']">
            <input
              type="text"
              v-model="item.title"
              :disabled="item.disabled"
              @blur="editListData(item)"
              class="flex1"
              placeholder="请输入检验项目名称" />
            <view
              v-if="isEdit && isHavePermission"
              @click="editListData(item)"
              class="">
              {{ item.disabled ? "修改" : index ? "删除" : "修改" }}
            </view>
          </view>
          <view @click="" class="box flex">
            <view class="">检验时间</view>

            <view
              @click="
                () => {
                  if (isEdit) {
                    listClickIndex = index;
                    showCheckTime = true;
                  }
                }
              "
              class="flex1 box-b1 flex">
              <input
                class="flex1 black"
                type="text"
                v-model="item.inspection_time"
                disabled
                placeholder="请选择" />
              <image
                v-if="isEdit"
                src="/static/login/pop-arrow.png"
                mode="aspectFit"></image>
            </view>
          </view>
          <view class="box flex">
            <view class="">检验数量</view>
            <input
              class="flex1"
              type="text"
              :disabled="!isEdit"
              @blur="
                checkUnqualified(
                  item,
                  item.inspection_num,
                  item.unqualified_num
                )
              "
              v-model="item.inspection_num"
              placeholder="请输入" />
          </view>
          <view class="box flex">
            <view class="">不合格数</view>
            <input
              class="flex1"
              :disabled="!isEdit"
              @blur="
                checkUnqualified(
                  item,
                  item.inspection_num,
                  item.unqualified_num
                )
              "
              v-model="item.unqualified_num"
              type="text"
              placeholder="请输入" />
          </view>
          <view class="box flex">
            <view class="">不合格率</view>
            <input
              class="flex1"
              disabled
              v-model="item.unqualified_percentage"
              type="text"
              placeholder="请输入" />
          </view>
          <view class="box flexc">
            <view class="mb28">不合格原因及采取措施</view>
            <view class="" style="height: 190upx">
              <u--textarea
                v-model="item.unqualified_info"
                style="height: 100%"
                :disabled="!isEdit"
                maxlength="200"
                placeholder="请输入备注信息"></u--textarea>
            </view>
          </view>
          <view class="box flex-between">
            <view class="">结果判定</view>
            <view class="flex">
              <view
                @click="
                  () => {
                    if (isEdit) {
                      changeResult(item, 1);
                    }
                  }
                "
                class="">
                <image
                  v-if="item.result == 2"
                  src="/static/order/r.png"
                  mode="aspectFit"
                  class="radio"></image>
                <image
                  v-if="item.result == 1"
                  src="/static/order/r-s.png"
                  mode="aspectFit"
                  class="radio"></image>
                <text>OK</text>
              </view>
              <view
                @click="
                  () => {
                    if (isEdit) {
                      changeResult(item, 1);
                    }
                  }
                "
                class="ml40">
                <image
                  v-if="item.result == 1"
                  src="/static/order/r.png"
                  mode="aspectFit"
                  class="radio"></image>
                <image
                  v-if="item.result == 2"
                  src="/static/order/r-s.png"
                  mode="aspectFit"
                  class="radio"></image>
                <text>NG</text>
              </view>
            </view>
          </view>
          <view
            @click="addInfo"
            class="flex-center add-icon"
            v-if="index == formData.length - 1 && isEdit">
            <image src="/static/order/add.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      <view class="wrap p-mark">
        <view class="t">流程</view>
        <view
          class="flex p-mark-mb"
          v-for="(item, index) in node_list"
          :key="index">
          <view class="avatar-box">
            <image :src="item.image" mode="aspectFit" class="avatar"></image>
            <image
              v-if="item.pass == 2"
              src="/static/order/s.png"
              mode="aspectFit"
              class="icon"></image>
            <image
              v-if="item.pass == 0 || item.pass == 1"
              src="/static/order/w.png"
              mode="aspectFit"
              class="icon"></image>
            <image
              v-if="item.pass == 3"
              src="/static/order/c.png"
              mode="aspectFit"
              class="icon"></image>
            <view class="b-ac" v-if="index < node_list.length - 1"></view>
          </view>
          <view class="flex1">
            <view class="tip1">{{ item.title }}</view>
            <view class="tip1-c">{{ item.info }}</view>
          </view>
          <view class="date" v-if="item.pass == 2">
            {{ item.update_time }}
          </view>
        </view>
      </view>
      <!-- 结束 -->
    </view>
    <view class="footer1 flex-between" v-if="mainData.is_examine == 0">
      <view
        @click="
          () => {
            if (mainData.is_edit != 1) return;
            isEdit = true;
          }
        "
        class="column-flex-center">
        <image
          class="edit"
          v-if="mainData.is_edit == 1"
          src="/static/order/edit.png"
          mode="aspectFit"></image>
        <image
          class="edit"
          v-if="mainData.is_edit != 1"
          src="/static/order/edit-dis.png"
          mode="aspectFit"></image>
        <view :class="mainData.is_edit != 1 ? 'dc' : 'back'">修改</view>
      </view>
      <view @click="revoke" class="column-flex-center">
        <image
          class="edit1"
          v-if="mainData.is_edit == 1"
          src="/static/order/cx.png"
          mode="aspectFit"></image>
        <image
          class="edit1"
          v-if="mainData.is_edit != 1"
          src="/static/order/cx-dis.png"
          mode="aspectFit"></image>
        <view :class="mainData.is_edit != 1 ? 'dc' : 'back'">撤销</view>
      </view>
      <view
        @click="toCheckApprove"
        class="footer1-btn"
        v-if="mainData.modification_approval == 1">
        发起修改审批
      </view>
      <view
        @click="submitForm"
        :class="['footer1-btn', !isEdit ? 'gry' : '']"
        v-if="mainData.modification_approval != 1">
        重新提交
      </view>
    </view>
    <view
      class="footer flex-between"
      style="padding-left: 32upx"
      v-if="mainData.is_examine == 1">
      <view class="sh-btn" @click="showPop(0)">拒绝</view>
      <view class="sh-btn" @click="showPop(1)">同意</view>
    </view>
    <!-- 拒绝弹框 -->
    <u-popup :show="show" mode="bottom" round="20">
      <view class="popup-wrap">
        <view class="pop-header" @click="() => (show = false)">
          <image src="/static/order/close.png" mode="aspectFit"></image>
          <text>
            {{ showPopIndex == 0 ? "确认拒绝" : "确认同意" }}
          </text>
        </view>
        <u--textarea
          v-model="mark"
          border="none"
          height="200"
          placeholder="请输入审批意见"></u--textarea>
        <view class="pop-tip">推荐回复</view>
        <view class="flex">
          <view
            class="pop-box"
            v-for="(item, index) in markList"
            :key="index"
            @click="() => (mark = item.info)">
            {{ item.info }}
          </view>
        </view>
        <view class="pop-btn" @click="submitSHbtn">
          {{ showPopIndex == 0 ? "确认拒绝" : "确认同意" }}
        </view>
      </view>
    </u-popup>
    <!-- 校验人 -->
    <u-picker
      @cancel="() => (showCheckUser = false)"
      @confirm="confirmCheckUser"
      :show="showCheckUser"
      confirmColor="#DA4334"
      :columns="checkUserList"
      keyName="real_name"></u-picker>
    <!-- 校验日期 -->
    <u-calendar
      @close="() => (showCheckDate = false)"
      @confirm="
        (val) => {
          topObj.test_time = val[0];
          showCheckDate = false;
        }
      "
      color="#DA4334"
      :maxDate="maxDate"
      :month-num="12"
      mode="single"
      :default-date="defaultDate"
      :minDate="minDate"
      :show="showCheckDate"></u-calendar>
    <!-- 校验时间 -->
    <u-datetime-picker
      :show="showCheckTime"
      v-model="checkTime"
      title="时间选择"
      cancelColor="#DA4334"
      confirmColor="#DA4334"
      @confirm="
        ({ value }) => {
          formData[listClickIndex].inspection_time = value;
          showCheckTime = false;
        }
      "
      @cancel="() => (showCheckTime = false)"
      mode="time"></u-datetime-picker>
  </view>
</template>

<script>
const d = new Date();
const year = d.getFullYear();
let month = d.getMonth() + 1;
month = month < 10 ? `0${month}` : month;
const date = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
const maxDate = new Date(year + 1, 0, 0).getTime();
const minDate = new Date(year, 0, 1).getTime();
const defaultDate = [`${year}-${month}-${date}`];
const monthNum = (year - 2022 + 1) * 12;
import utils from "../../../plugin/util.js";
export default {
  data() {
    return {
      maxDate,
      minDate,
      defaultDate,
      showPopIndex: 0,
      mark: "",
      isHavePermission: false,
      action: {
        1: "一工段",
        2: "二工段",
        3: "三工段",
        4: "四工段",
        5: "副产车间",
        6: "五工段",
      },
      form_type_map: {
        1: "11",
        2: "12",
        3: "13",
        4: "14",
        5: "15",
        6: "16",
      },
      userRoleMap: {
        1: "quality_one",
        2: "quality_two",
        3: "quality_three",
        4: "quality_four",
        5: "quality_workshop",
        6: "quality_five",
      },
      isEdit: false,
      showCheckUser: false,
      showCheckTime: false,
      showCheckDate: false,
      checkTime: "",
      type: "",
      formData: [],
      mainData: {},
      topObj: {
        test_time: "",
        inspector_user_id: "",
        info: "",
        is_draft: "0",
      },
      node_list: [],
      listClickIndex: "",
      checkUserList: [],
      markList: [],
      show: false,
      maxDate: "",
      minDate: "",
    };
  },
  async onLoad(e) {
    await this.getCheckUser();
    await this.getDetailInfo(e);
    // 用户权限
    this.getUserPermission();
  },
  methods: {
    //审核提交
    submitSHbtn() {
      this.$api({
        url: "/change",
        method: "post",
        data: {
          id: this.mainData.detail.id,
          form_type: "101",
          status: this.showPopIndex == 0 ? "2" : "1",
          info: this.mark,
        },
      }).then((res) => {
        this.show = false;
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 2000);
      });
    },
    revoke() {
      this.$api({
        url: "/revoke",
        method: "get",
        data: {
          id: this.mainData.detail.id,
          form_type: 101,
        },
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      });
    },
    getUserPermission() {
      this.$api({
        url: "/getUserRoleBySlug",
        method: "get",
        data: {
          slug: this.userRoleMap[this.type],
        },
      }).then((res) => {
        this.isHavePermission = res.data;
      });
    },
    toCheckApprove() {
      this.toRoute({
        path: "edit-record",
        query: {
          form_type: this.form_type_map[this.type],
          type: 101,
          pid: false,
          id: this.mainData.detail.id,
        },
      });
    },
    submitForm() {
      if (!this.isEdit) return;
      this.$api({
        url: "/save_quality_control",
        method: "post",
        data: {
          ...this.topObj,
          details: JSON.stringify(this.formData),
          type: this.type,
          is_draft: 0,
          id: this.mainData.detail.id,
        },
      }).then((res) => {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        setTimeout(() => {}, 1000);
      });
    },
    showCheckDateFn() {
      this.showCheckDate = true;
    },
    addInfo() {
      this.formData.push({
        title: "",
        disabled: false,
        inspection_time: "",
        inspection_num: "",
        unqualified_num: "",
        unqualified_info: "",
        result: 1,
        unqualified_percentage: "",
      });
    },
    //点击同意，拒绝弹框
    showPop(k) {
      const info_type = k == 0 ? "2" : "1";
      this.markList = [];
      this.showPopIndex = k;
      this.$api({
        url: "/getInfo",
        method: "get",
        data: {
          info_type,
        },
      }).then((res) => {
        if (res.code === 200 && res.data.length > 0) {
          this.show = true;
          this.markList = res.data;
        }
      });
    },
    // 获取校验人
    getCheckUser() {
      return new Promise((resolve) => {
        this.$api({
          url: "/get_user_list",
          method: "get",
          data: {
            type: 2,
          },
        }).then((res) => {
          this.checkUserList.push(res.data);
          resolve();
        });
      });
    },
    confirmCheckUser({ value }) {
      this.topObj.inspector_user_id = value[0].user_id;
      this.topObj.inspector_user_name = value[0].real_name;
      this.showCheckUser = false;
    },
    checkUnqualified(item, num1, num2) {
      if (num1 && num2) {
        this.$set(
          item,
          "unqualified_percentage",
          (utils.div(num2, num1) * 100).toFixed(2) + "%"
        );
      } else {
        item.unqualified_level = "";
      }
    },
    editListData(item) {
      this.$set(item, "disabled", !item.disabled);
      console.log(item);
      // item.disabled = !item.disabled;
    },
    getDetailInfo(item) {
      return new Promise((resolve) => {
        this.$api({
          url: "/get_quality_control_detail",
          method: "get",
          data: {
            quality_type: item.type,
            id: item.id,
          },
        }).then((res) => {
          this.mainData = res.data;
          this.formData = res.data.detail.detail.map((item) => {
            return {
              ...item,
              disabled: true,
              unqualified_percentage: item.unqualified_percentage + "%",
            };
          });

          this.node_list = res.data.node_list;
          this.type = res.data.detail.type;
          for (let key in this.topObj) {
            this.topObj[key] = res.data.detail[key];
          }
          let findItem = this.checkUserList[0].find((item) => {
            return this.mainData.detail.inspector_user_id == item.user_id;
          });
          this.topObj.inspector_user_name = findItem.real_name;
          resolve();
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/config/com.scss";

.quality-assurance-detail {
  width: 100%;
  height: 100%;
  background: #f5f7f9;
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  .popup-wrap {
    padding: 34upx 32upx 0;
    width: 100%;
    box-sizing: border-box;
    .pop-header {
      position: relative;
      font-weight: bold;
      text-align: center;
      font-size: 28rpx;
      color: #181818;
      margin-bottom: 20upx;
      & > image {
        position: absolute;
        width: 32upx;
        height: 32upx;
        left: 30upx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .pop-tip {
      font-size: 26rpx;
      color: #737373;
      margin-bottom: 24upx;
      margin-top: 20upx;
    }
    .pop-box {
      padding: 12upx 20upx;
      background: #eaebed;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      font-size: 26rpx;
      color: #191919;
      margin-right: 18upx;
    }
    .pop-btn {
      height: 80rpx;
      background: #da4334;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      line-height: 80upx;
      text-align: center;
      margin-top: 106upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
  ::v-deep .u-popup {
    flex: 0 !important;
  }

  .gry {
    background: #b9b9b9 !important;
    color: #ffffff !important;
  }

  .header-box {
    padding: 28upx 32upx 38upx;
    font-size: 24rpx;
    color: #8d8d8d;
    background: #ffffff;

    &-t {
      font-weight: bold;
      font-size: 32rpx;
      color: #161616;
      margin-bottom: 20upx;
    }

    .s-icon {
      width: 128upx;
      height: 128upx;
    }

    &-des {
      font-size: 28rpx;
      color: #f17303;
      margin-top: 42upx;
    }
  }

  .mb70 {
    padding-top: 20upx;
    padding-bottom: 70upx;
    background: #f5f7f9;
  }

  .color-black {
    color: black !important;
  }

  .black {
    color: black !important;
  }

  .wrap {
    background: #fff;
    padding: 0 32upx;

    .box2 {
      padding: 28upx 0;
      font-size: 32rpx;

      & > view {
        font-size: 32rpx;
        color: #171717;
      }

      & > view:nth-of-type(1) {
        color: #a0a0a0;
        margin-bottom: 28upx;
      }
    }

    .c16 {
      color: #161616;
    }

    .box {
      padding: 28upx 0;
      font-size: 32rpx;
      border-bottom: 1rpx solid #e4e4e4;

      & > view {
        font-size: 32rpx;
        color: #a0a0a0;
      }

      & > input {
        height: 28upx;
        text-align: right;
        font-size: 32rpx;
      }

      .box-b {
        margin-top: 28upx;

        & > input {
          height: 28upx;
          font-size: 32rpx;
        }

        & > image {
          width: 12upx;
          height: 21upx;
        }
      }

      .box-b1 {
        & > input {
          height: 28upx;
          text-align: right;
          font-size: 32rpx;
        }

        & > image {
          width: 12upx;
          height: 21upx;
          margin-left: 28upx;
        }
      }

      ::-webkit-input-placeholder {
        color: #a0a0a0;
      }
    }
  }

  .mb28 {
    margin-bottom: 28upx;
  }

  .ml40 {
    margin-left: 40upx;
  }

  .footer1 {
    padding: 8upx 32upx 8upx 70upx;
    background: #fff;
    font-size: 24rpx;
    color: #9f9ea3;
    box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(0, 0, 0, 0.0588);

    .edit {
      width: 37upx;
      height: 37upx;
      margin-bottom: 10upx;
    }

    .edit1 {
      width: 35rpx;
      height: 37rpx;
      margin-bottom: 12upx;
    }

    &-btn {
      width: 372rpx;
      height: 80rpx;
      background: #da4334;
      border-radius: 422rpx 422rpx 422rpx 422rpx;
      border: 1rpx solid #dafbff;
      text-align: center;
      line-height: 80upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }

  .footer {
    padding: 8upx 32upx;
    background: #fff;
    box-shadow: 0rpx -8rpx 20rpx 0rpx rgba(0, 0, 0, 0.0588);

    & > view {
      width: 328rpx;
      height: 80rpx;
      background: #f2f1f6;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      border: 1rpx solid #eaecee;
      text-align: center;
      line-height: 80upx;
      font-size: 28rpx;
      color: #171717;
    }

    & > view:nth-of-type(2) {
      background: #da4334;
      color: #ffffff;
    }
  }

  .box1 {
    padding-top: 40upx;

    & > input {
      font-size: 32rpx;
      color: #f17303;
    }

    & > view {
      font-size: 32rpx;
      color: #da4334;
    }
  }

  .radio {
    width: 36rpx;
    height: 36rpx;
    margin-right: 12upx;
  }

  .p-mark {
    padding: 28upx 32upx 10upx;

    &-mb {
      margin-bottom: 74upx;
    }

    &-mb:last-child {
      margin-bottom: 52upx;
    }
  }

  .avatar-box {
    position: relative;
    width: 68upx;
    height: 68upx;
    margin-right: 22upx;

    .avatar {
      width: 100%;
      height: 100%;
    }

    .icon {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 32upx;
      height: 32upx;
    }
  }

  .tip1 {
    font-size: 28rpx;
    color: #a0a0a0;
    margin-bottom: 14upx;
  }

  .tip1-c {
    font-size: 28rpx;
    color: #171717;
  }

  .date {
    font-size: 24rpx;
    color: #a0a0a0;
  }

  .b-ac {
    position: absolute;
    width: 2rpx;
    height: 56rpx;
    background: #d7d7d7;
    bottom: -76upx;
    left: 50%;
    transform: translateX(-50%);
  }

  .t {
    font-weight: bold;
    font-size: 32rpx;
    color: #161616;
    margin-bottom: 40upx;
  }
  .popup-wrap {
    padding: 34upx 32upx 0;
    width: 100%;
    box-sizing: border-box;
    .pop-header {
      position: relative;
      font-weight: bold;
      text-align: center;
      font-size: 28rpx;
      color: #181818;
      margin-bottom: 20upx;
      & > image {
        position: absolute;
        width: 32upx;
        height: 32upx;
        left: 30upx;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .pop-tip {
      font-size: 26rpx;
      color: #737373;
      margin-bottom: 24upx;
      margin-top: 20upx;
    }
    .pop-box {
      padding: 12upx 20upx;
      background: #eaebed;
      border-radius: 6rpx 6rpx 6rpx 6rpx;
      font-size: 26rpx;
      color: #191919;
      margin-right: 18upx;
    }
    .pop-btn {
      height: 80rpx;
      background: #da4334;
      border-radius: 42rpx 42rpx 42rpx 42rpx;
      line-height: 80upx;
      text-align: center;
      margin-top: 106upx;
      font-size: 28rpx;
      color: #ffffff;
    }
  }
}
</style>
